<template>
  <div class="shopcart">
    <ul>
    	<li v-for="item in shopcart" :key="item.id">
			<img :src="item.src" >
			<div>
				<p>{{item.title}}</p>
				<p>￥ {{item.price}}</p>
				<p><button @click="del(item)">删除</button></p>
			</div>
		</li>
		<p v-if="shopcart.length">总价：{{totalPrice}}</p>
		<p v-else>购物车暂无商品</p>
    </ul>
  </div>
</template>

<script>
import {mapState,mapGetters} from "vuex"
export default {
  name: 'ShopCart',
  /* computed: {
	  shopcart(){
		  return this.$store.state.shopcart
	  },
	  totalPrice(){
		  return this.$store.getters.totalPrice
	  }
  } */
  computed: {
	  ...mapState(['shopcart']),
	  ...mapGetters(['totalPrice'])
  },
  methods:{
	  del(item){
	  		  // 组件里是不能直接变更状态的，可以通过
	  		  this.$store.commit('del',item)
	  }
  }
}
</script>

<style scoped>
	.shopcart{
		width: 100%;
		padding-bottom: 50px;
	}
	li{
		position: relative;
		border-bottom: 1px dashed #ccc;
	}
	div{
		display: inline-block;
		position: absolute;
		top: 10px;
		width: 120px;
		line-height: 30px;
		font-size: 14px;
	}
	img{
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 10px 0px 10px;
	}
	div p:nth-child(2){
		color: #f00;
	}
	button{
		color: white;
		background: coral;
		border: none;
		padding: 5px;
	}
</style>